<template>
  <Modal v-model="show" title="分配角色">
    <Transfer
        :data="data"
        :target-keys="targetKeys"
        :list-style="listStyle"
        :titles="['未分配角色', '已分配角色']"
        filterable
        :filter-method="filterMethod"
        @on-change="handleChange"></Transfer>

  </Modal>
</template>
<script>
export default {
  props: {
    modelValue: {type: Boolean, required: true},
    userId: {type: Number, required: true},
  },
  data() {
    return {
      data: [
        {key: 1, label: "超级管理员"},
        {key: 2, label: "普通用户"},
        {key: 3, label: "管理员"},

      ],
      targetKeys: [2],
      listStyle: {
        height: '500px',
      }
    }
  },
  methods: {
    handleChange(newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    filterMethod(data, query) {
      return data.label.indexOf(query) > -1;
    }
  },
  computed: {
    show: {
      get() {
        return this.modelValue;
      },
      set(val) {
        this.$emit("update:model-value", val);
      }
    }
  },
}
</script>

<style>
.ivu-transfer {
  text-align: center;
}

.ivu-transfer-list-footer {
  border: none;
}

.ivu-transfer-list-content {
  text-align: left;
}
</style>
